﻿<!DOCTYPE html>
<html>
<script src="../js/jquery.min.js"></script>

<head>
  <title>原神头像大团圆</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    .fullpage {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .pc_page_swiper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pc_page_swiper .swiper-container {
      /* position: absolute; */
    }

    li {
      width: 100%;
      position: absolute;
      /*一定要设置这个*/
      top: 0;
      left: 0;
      overflow: hidden;
      z-index: 4;
    }

    .pc_first_page_img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .pc_second_page_img {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .pc_first_page_img img,
    .pc_second_page_img img {
      width: 100%;
      height: 100%;
    }

    .pc_first_page_info {
      position: absolute;
      text-align: right;
      z-index: 10;
    }

    .pc_first_page_info h3 {
      color: #FFFFFF;
      font-size: 100px;
      margin-bottom: 29px;
    }

    .pc_first_page_info h5 {
      color: #FFFFFF;
      font-size: 48px;
    }

    .pc_second_page {
      width: 100%;
      height: 100%;
      display: flex;
    }

    .pc_first_page_arrow {
      width: 20px;
      position: absolute;
      bottom: 50px;
      z-index: 10;
      cursor: pointer;
      animation-name: beat;
      /*动画名称*/
      animation-duration: .5s;
      /*设置秒数*/
      animation-timing-function: linear;
      /*速度曲线*/
      animation-iteration-count: infinite;
      /*播放次数*/
      animation-direction: alternate;
      /*逆向播放*/
      animation-play-state: running;
      /*正在运行*/
    }

    @keyframes beat {
      0% {
        bottom: 50px;
      }

      100% {
        bottom: 55px;
      }
    }

    .slide_show {
      position: relative;
      height: 100%;
      width: 100%;
    }

    .slide_show * {
      outline: none;
    }

    .slide_show li img {
      width: 100%;
      overflow: hidden;
      -webkit-transition: all 3s cubic-bezier(0.7, 0.5, 0.3, 1);
      transition: all 3s cubic-bezier(0.7, 0.5, 0.3, 1);
    }

    .slide_show .pc_first_page_slide.slick-active img {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }

    li.A {
      z-index: 13;
    }

    li.B {
      z-index: 12;
    }

    li.C {
      z-index: 11;
    }

    li.D {
      z-index: 10;
    }
    li.E {
      z-index: 9;
    }

    li.F {
      z-index: 8;
    }

    li.G {
      z-index: 7;
    }

    li.H {
      z-index: 6;
    }

    li.I {
      z-index: 5;
    }

    li.J {
      z-index: 4;
    }

    li.K {
      z-index: 3;
    }

    li.L {
      z-index: 2;
    }

    li.M {
      z-index: 1;
    }



    li.current {
      /* clip:rect(0,1600px,970px,0); */
      z-index: 9;
      animation: mymove 1s linear 0s forwards;
    }

    @keyframes mymove {
      from {
        clip: rect(0, 2000px, 970px, 0);
      }

      to {
        clip: rect(0, 2000px, 970px, 2000px);
      }
    }

    .activeImg {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
  </style>
</head>

<body>
  <div class="fullpage" id="fullpage">
    <div class="slide_show">
      <ul class="fullpage_slider">
        <li class="pc_first_page_slide A">
          <div class="pc_first_page_img">
            <img src="1.jpg" class="img" alt="">
          </div>
        </li>
        <li class="pc_first_page_slide B">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="2.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="3.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide C">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="4.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="5.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide D">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="6.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="7.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide E">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="8.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="9.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide F">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="10.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="11.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide G">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="12.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="13.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide H">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="14.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="15.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide I">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="16.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="17.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide J">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="18.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="19.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide K">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="20.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="21.jpg" alt="">
            </div>
          </div>
        </li>
        <li class="pc_first_page_slide L">
          <div class="pc_second_page">
            <div class="pc_second_page_img">
              <img src="22.jpg" alt="">
            </div>
            <div class="pc_second_page_img">
              <img src="23.jpg" alt="">
            </div>
          </div>
        </li>
       
        <li class="pc_first_page_slide M">
          <div class="pc_second_page">
            <div class="pc_first_page_img">
              <img src="6.jpg" class="img" alt="">
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="pc_first_page_arrow" data-label="index">
      <img src="images/arrow_down.png" alt="">
    </div>
  </div>


  <div id="source" style="width:50px;height:18px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis">
    <audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="wyt.mp3">
    </audio>

    <script type="text/javascript">

      $(function () {
        var num = 0;
        $('.pc_first_page_slide, #fullpage').height($(window).height());
        function fn() {
          num++;
          if (num === $(".slide_show>ul>li").length) {
            num = 0;
          }
          $(".slide_show li").eq(num).show().find('img').addClass('activeImg');
          $(".slide_show li").eq(num).siblings("li").find('img').removeClass('activeImg')
          $(".slide_show li").eq(num - 1).addClass('current').siblings("li").removeClass('current');

          setTimeout(function () {
            $(".slide_show li").eq(num - 1).hide()
          }, 1000)
        }
        setInterval(fn, 2500);
      })

// oBanner.style.backgroundImage = "url(" + num1 + ".jpg')";

    </script>
</body>

</html>